<!--弹框选择组件-->
<template>
  <SelectComp v-bind="getBindValue" @selectOk="setValue"/>
</template>
<script lang="ts">
import SelectComp from './base/SelectComp.vue';
import { defineComponent, ref, unref, reactive, watch, provide } from 'vue';
import { useModal } from '@/components/modal';
import { useRuleFormItem } from '@/hooks/component/use-form-item';
import { useAttrs } from '@pkg/use';
import { selectConfig } from './modal/data/selectConfig';
export default defineComponent({
  name: 'ApiModalSelect',
  components: {
    SelectComp,
  },
  inheritAttrs: false,
  props: {
    selectType: {
      type: String,
    },
    success:{
      type:Function
    },
    value: {
      type: [String, Array],
    },
    selectConfig: {
      type: Object,
      default: {},
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  emits: ['options-change', 'change','success'],
  setup(props, { emit }) {
    const attrs = useAttrs();
    const emitData: any = ref<object>();
    //注册model
    const [regModal, { openModal }] = useModal();
    //表单值
    const [state] = useRuleFormItem(props, 'value', 'change', emitData);
    //下拉框选中值
    let selectValues: any = reactive<object>({
      value: [],
      change: false,
    });

    //下发 selectValues,xxxBiz组件接收
    provide('selectValues', selectValues);
    //组件类型
    const selectType: any = props.selectType;
    //组件类型
    const compConfig = selectType ? selectConfig[selectType] : props.selectConfig;
    const { searchForm, ...config } = compConfig;
    //查询form配置
    const formConfig = {
      schemas: searchForm,
    };
    console.info('config', config);
    console.info('searchForm', searchForm);
    const getBindValue: any = Object.assign(
      {
        formConfig,
      },
      unref(props),
      unref(attrs),
      config,
    );

    /**
     * 监听value变化
     */
    watch(
      () => props.value,
      () => {
        props.value && initValue();
      },
    );

    /**
     * 监听selectValues变化
     */
    watch(selectValues, () => {
      if (selectValues) {
        state.value = selectValues.value;
      }
    });

    /**
     * 打卡弹出框
     */
    function handleOpen() {
      openModal(true, {
        isUpdate: false,
      });
    }

    /**
     * 将字符串值转化为数组
     */
    function initValue() {
      let value = props.value ? props.value : [];
      if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
        state.value = value.split(',');
        selectValues.value = value.split(',');
      }
    }

    /**
     * 设置下拉框的值
     */
    function setValue(options, values,selectRows) {
      //emitData.value = values.join(",");
      //state.value = values;
      //selectValues.value = values;
      emit("success",options,values,selectRows)
    }

    return {
      state,
      attrs,
      getBindValue,
      selectValues,
      regModal,
      setValue,
      handleOpen,
    };
  },
});
</script>
<style lang="less" scoped>
.j-select-row {
  @width: 82px;

  .left {
    width: calc(100% - @width - 8px);
  }

  .right {
    width: @width;
  }

  .full {
    width: 100%;
  }

  ::v-deep(.ant-select-search__field) {
    display: none !important;
  }
}
</style>
